<template>
  <div>
    <el-form-item label="量级设置">
      <el-input-number
        v-model="activeData.table.level"
        :min="1"
        :max="100"
        label="描述文字"
      />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最低分文案">
      <el-input
        v-model="activeData.table.copyWriting.min"
        placeholder="请输入最低分文案"
      />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最高分文案">
      <el-input
        v-model="activeData.table.copyWriting.max"
        placeholder="请输入最高分文案"
      />
    </el-form-item>
    <el-form-item label="图标">
      <span
        v-for="icon in iconList"
        :key="icon"
        :class="[icon, icon === activeData.icon ? 'selected' : '']"
        :style="styleObject"
        @click="handleSelectIcon(icon)"
      />
    </el-form-item>

    <el-form-item label="图标颜色">
      <el-color-picker v-model="activeData.iconColor" />
    </el-form-item>
    <el-form-item
      label="对齐方式"
    >
      <el-select v-model="activeData.table.align" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <matrix-option :active-data="activeData" />
  </div>
</template>
<script>
import MatrixOption from "./matrix"

import draggable from "vuedraggable"

export default {
  name: "ConfigItemMatrixScale",
  components: {
    MatrixOption,
    draggable
  },
  props: ["activeData"],
  data() {
    return {
      options:[
        {
          label:'居中',
          value:'center'
        },
        {
          label:'居左',
          value:'left'
        },
        {
          label:'居右',
          value:'right'
        }
      ],
      iconList: [
        "tduck-taiyang",
        "tduck-biaoqing-weixiao",
        "tduck-dianzan",
        "tduck-aixin",
        "tduck-star",
        "tduck-moonyueliang"
      ]
    }
  },
  computed: {
    styleObject() {
      return {
        "--color": this.activeData.iconColor || "#f7ba2a"
      }
    }
  },
  methods: {
    handleSelectIcon(icon) {
      // console.log(icon)
      this.$set(this.activeData, "icon", icon)
    }
  }
}
</script>

<style lang="scss" scoped>
[class^="tduck-"],
[class*=" tduck-"] {
  margin: 5px;

  &:hover {
    color: var(--color);
  }
}

.selected {
  color: var(--color);
}
</style>
